<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奇蛋物语介绍</title>
    <link rel="stylesheet" href="Test.css">
</head>
<body>
<!-- 侧边导航栏 -->
<nav class="sidebar">
    <ul>
        <li><a href="#intro">简介</a></li>
        <li><a href="#characters">人物介绍</a></li>
        <li><a href="#gallery">图片展示</a></li>
        <li><a href="#about">关于作品</a></li>
    </ul>
</nav>

<!-- 主要内容区域 -->
<main>
    <!-- 简介部分 -->
    <section id="intro" class="section intro-section">
        <h1>奇蛋物语</h1>
        <p>
            《奇蛋物语》（Wonder Egg Priority）是由 CloverWorks 制作的原创电视动画，于 2021 年 1 月首播。
            故事讲述了少女们在梦境中通过“奇蛋”拯救他人的故事，探讨了青春期少女的心理问题和社会议题。
        </p>
    </section>

    <!-- 人物介绍部分 -->
    <section id="characters" class="section characters-section">
        <h2>人物介绍</h2>
        <div class="character-card">
            <img src="https://via.placeholder.com/150" alt="Ai Ohto" class="character-img">
            <h3>大戸愛（Ai Ohto）</h3>
            <p>本作的主角，因好友自杀而陷入自责。通过奇蛋进入梦境，试图拯救他人。</p>
        </div>
        <div class="character-card">
            <img src="https://via.placeholder.com/150" alt="Rika Kawai" class="character-img">
            <h3>川井リカ（Rika Kawai）</h3>
            <p>性格开朗的少女，因校园欺凌而封闭自己。在梦境中与 Ai 相遇并成为伙伴。</p>
        </div>
        <div class="character-card">
            <img src="https://via.placeholder.com/150" alt="Neiru Aonuma" class="character-img">
            <h3>青沼ねいる（Neiru Aonuma）</h3>
            <p>冷静理智的少女，似乎隐藏着不为人知的秘密。</p>
        </div>
        <div class="character-card">
            <img src="https://via.placeholder.com/150" alt="Momoe Sawaki" class="character-img">
            <h3>沢木桃恵（Momoe Sawaki）</h3>
            <p>外表像男生的少女，因性别认同问题而苦恼。</p>
        </div>
    </section>

    <!-- 图片展示部分 -->
    <section id="gallery" class="section gallery-section">
        <h2>图片展示</h2>
        <div class="gallery-container">
            <img src="https://via.placeholder.com/400x300" alt="Gallery Image 1" class="gallery-img">
            <img src="https://via.placeholder.com/400x300" alt="Gallery Image 2" class="gallery-img">
            <img src="https://via.placeholder.com/400x300" alt="Gallery Image 3" class="gallery-img">
        </div>
    </section>

    <!-- 关于作品部分 -->
    <section id="about" class="section about-section">
        <h2>关于作品</h2>
        <p>
            《奇蛋物语》以其独特的画风、深刻的主题和精彩的剧情赢得了观众的喜爱。
            作品通过少女们的冒险，探讨了自杀、欺凌、性别认同等社会议题，发人深省。
        </p>
    </section>
    <a href="javascript:history.back()">返回</a>
</main>

<!-- 页脚 -->
<footer>
    <p>&copy; 2023 奇蛋物语介绍页面. 所有图片和内容仅供参考。</p>
</footer>
</body>
</html>